<%@ page language="java" contentType="text/html; charset=UTF-8"
    pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>注册界面</title>
</head>
<script>
    
    //1.检查用户名  
    function checkUn(){  
        var un = document.getElementById("un");  
        var spanNode = document.getElementById("unspan");  
        //用户名1~10位，只得包含汉字、数字、英文大小写字母、下划线的一种或多种
        var reg=/^[\u4e00-\u9fa5\\w]+{1,10}$/i;        
        if(reg.test(un)){  
            //符合规则  
            spanNode.innerHTML = "";  
            document.getElementById("unclass");   
            return true;  
        }else{  
            //不符合规则  
            spanNode.innerHTML = "用户名1~10位，只得包含汉字、数字、英文大小写字母、下划线的一种或多种".fontcolor("red");  
            document.getElementById("unclass");    
            return false;  
        }     
    }   
    //2.检查密码
    function checkPw(){  
        var pw = document.getElementById("pw").value;  
        var spanNode = document.getElementById("pwspan");  
        //密码6~20位，只得包含数字、英文大小写字母、下划线的一或多种
        var reg = /^[\w]+{6,20}$/;  
        if(reg.test(pw)){  
            //符合规则  
            spanNode.innerHTML = "";  
            document.getElementById("pwclass");   
            return true;  
        }else{  
            //不符合规则  
            spanNode.innerHTML = "密码6~20位，只得包含数字、英文大小写字母、下划线的一或多种".fontcolor("red");  
            document.getElementById("pwclass");    
            return false;  
        }     
    }   
    
    //3.检查两次输入的密码是否一致
    function checkCfpw(){  
    	 var pw = document.getElementById("pw").value; 
    	 var cfpw = document.getElementById("cfpw").value;  
    	 var spanNode = document.getElementById("cfpwspan");  
    	    //密码6~20位，只得包含数字、英文大小写字母、下划线的一或多种
    	    var reg = /^[\w]+{6,20}$/;  
    	    //确认密码输入符合规则  
    	    if(reg.test(cfpw)){  
    	        //符合规则  
    	        if(pw==cfpw){
    	        spanNode.innerHTML = "".fontcolor("green");  
    	        document.getElementById("cfpw").className = "icon ticker";   
    	             return true;  
    	        }else{
    	        spanNode.innerHTML = "两次输入的密码不一致！".fontcolor("red");  
    	        document.getElementById("cfpw").className = "icon into";    
    	            return false;  
    	        }
    	    }
    	    //确认输入密码不符合规则  
    	    else{  
    	        spanNode.innerHTML = "密码6~20位，只得包含数字、英文大小写字母、下划线的一或多种".fontcolor("red");  
    	        document.getElementById("cfpw").className = "icon into";    
    	        return false;  
    	    }     
    }  
    
    //4.检验手机号
    function checkPn(){  
        var pn = document.getElementById("pn").value;  
        var spanNode = document.getElementById("pnspan");  
        //密码6~20位，只得包含数字、英文大小写字母、下划线的一或多种
        var reg = /^1[35678][0-9]{9}$/;
        if(reg.test(pn)){  
            //符合规则  
            spanNode.innerHTML = "".fontcolor("green");  
            document.getElementById("pnclass").className = "icon ticker";   
            return true;  
        }else{  
            //不符合规则  
            spanNode.innerHTML = "请输入11位有效手机号".fontcolor("red");  
            document.getElementById("pnclass").className = "icon into";    
            return false;  
        }     
    } 

   //5.检查邮箱  
    function checkEm(){  
        var em = document.getElementById("em").value;  
        var spanNode = document.getElementById("emspan");  
           //编写邮箱的正则  
        var reg = /^[a-z0-9]\w+@[a-z0-9]+(\.[a-z]{2,3}){1,2}$/i; 
        if(reg.test(em)){  
            //符合规则  
            spanNode.innerHTML = "".fontcolor("green");  
            document.getElementById("emclass").className = "icon ticker";    
            return true;  
        }else{  
            //不符合规则  
            spanNode.innerHTML = "邮箱格式不正确，请重新填写！".fontcolor("red");  
            document.getElementById("emclass").className = "icon into";    
            return false;  
        }     
    }  

    //6.检查地址
	function checkAd(){ 
         var ad = document.getElementById("ad").value;  
         var spanNode = document.getElementById("adspan");  
           //编写地址的正则
         var reg =  /^([\u4e00-\u9fa5\a-zA-Z0-9])+{0,100}$/i;  
         if(reg.test(ad)){  
            //符合规则  
         spanNode.innerHTML = "".fontcolor("green");  
         document.getElementById("adclass").className = "icon ticker";    
         return true;  
         }else{  
              //不符合规则  
              spanNode.innerHTML = "地址必须0~100位，只得包含汉字、数字、英文大小写字母的一种或多种".fontcolor("red");  
              document.getElementById("adclass").className = "icon into";    
              return false;  
         }   
	}
    //7.检查验证码
    function checkDy(){  
        var dy = document.getElementById("dy").value;  
        var spanNode = document.getElementById("dyspan");  
        //验证码是否为4位有效数字
        var reg = /\d{4}/;      
        if(reg.test(dy)){  
            //符合规则  
            spanNode.innerHTML = "".fontcolor("green");  
            document.getElementById("dyclass").className = "icon ticker";   
            return true;  
        }else{  
            //不符合规则  
            spanNode.innerHTML = "请输入正确的验证码".fontcolor("red");  
            document.getElementById("dyclass").className = "icon into";    
            return false;  
        }     
    }  
    //8.检查用户所有的输入的所有是否符合规则
    function checkAll(){  
  
        var nu = checkNu();  
        var pw = checkPw();  
        var cfpw = checkCfpw();  
        var pn = checkPn();  
        var em = checkEm();  
        var ad = checkAd();  
        var dy = checkDy();  
            if(nu&&pw&&cfpw&&pn&&ad&&dy){  
                return true;  
            }else{  
                return false;  
            }  
        }    

    function changeA()
    {
            document.getElementById('b').value=document.getElementById('a').options[document.getElementById('a').selectedIndex].value;
    }
    function changeB()
    {
            document.getElementById('d').value=document.getElementById('c').options[document.getElementById('c').selectedIndex].value;
    }
    function changeC()
    {
            document.getElementById('f').value=document.getElementById('e').options[document.getElementById('e').selectedIndex].value;
    }
</script>
<body>
<form action="welcome.jsp" method="post" onsubmit="return checkAll()">
<ul class="left-form">
<input type="hidden" name="form" value="true"/>

<div>昵称：<input type="text" name="un"  id="un" maxlength="10" onblur="checkUn()" /> （*必填，1~10位，只得包含汉字、数字、英文大小写字母、下划线的一种或多种）
<a href="#" id="unclass" class=""> </a></div><br>
<div class="clear"></div>
<span style="font-size:13px" id="unspan"></span>    

<div>密码：<input type="password" name="pw" id="pw" maxlength="20" onblur="checkPw()" /> （*必填，6~20位，只得包含数字、英文大小写字母、下划线的一或多种）
<a href="#" id="pwclass" class=""> </a></div><br>
<div class="clear"></div>
<span style="font-size:13px" id="pwspan"></span>   

<div>确认密码：<input type="passWord" name="cfpw" id="cfpw" maxlength="20" onblur="checkCfpw()" /> （*必填，必须与密码一致）
<a href="#" id="cfpwclass" class=""> </a></div><br>
<div class="clear"></div> 
<span style="font-size:13px" id="cfpwspan"></span>   
  
<div>手机号：<input type="text" name="pn" id="pn" maxlength="11" onblur="checkPn()"/> （*必填，11位纯数字）
<a href="#" id="pnclass" class=""> </a></div><br>
<div class="clear"></div>
<span style="font-size:13px" id="pnspan"></span>  
         
<div>电子邮箱：<input type="text" name="em" id="em" maxlength="20" onblur="checkEm()"/> （非必填，若填写则必须按照有效邮箱域名填写）
<a href="#" id="emclass" class=""> </a></div><br>
<div class="clear"></div>
<span style="font-size:13px" id="emspan"></span>  

<div>默认收货地址：<span style="absolute;margin-top:-12px;">
    <table cellspacing="0" cellpadding="0" width="100%" border="0">
        <tr>
            <td align="left">
                <span style="position:absolute;border:1pt solid #c1c1c1;overflow:hidden;width:188px;height:19px;clip:rect(-1px 190px 190px 170px);">
                    <select name="a" id="a" style="width:190px;height:20px;margin:-2px;" onChange="changeA();">
                    <option value="" style="color:#c2c2c2;">---请选择---</option>
                    <option value="福建省">福建省</option>
                    </select>
                </span>
                <span style="position:absolute;border-top:1pt solid #c1c1c1;border-left:1pt solid #c1c1c1;border-bottom:1pt solid #c1c1c1;width:170px;height:19px;">
                    <input type="text" name="b" id="b" value="可在下拉框选择也可直接输入" style="width:170px;height:15px;border:0pt;">
                </span>
            </td>
            
            <td align="center">
                <span style="position:absolute;border:1pt solid #c1c1c1;overflow:hidden;width:188px;height:19px;clip:rect(-1px 190px 190px 170px);">
                    <select name="c" id="c" style="width:190px;height:20px;margin:-2px;" onChange="changeB();">
                    <option value="" style="color:#c2c2c2;">---请选择---</option>
                    <option value="福州市">福州市</option>
                    </select>
                </span>
                <span style="position:absolute;border-top:1pt solid #c1c1c1;border-left:1pt solid #c1c1c1;border-bottom:1pt solid #c1c1c1;width:170px;height:19px;">
                    <input type="text" name="d" id="d" value="可在下拉框选择也可直接输入" style="width:170px;height:15px;border:0pt;">
                </span>
            </td>
            
            <td align="right">
                <span style="position:absolute;border:1pt solid #c1c1c1;overflow:hidden;width:188px;height:19px;clip:rect(-1px 190px 190px 170px);">
                    <select name="e" id="e" style="width:190px;height:20px;margin:-2px;" onChange="changeC();">
                    <option value="" style="color:#c2c2c2;">---请选择---</option>
                    <option value="闽侯县">闽侯县</option>
                    </select>
                </span>
                <span style="position:absolute;border-top:1pt solid #c1c1c1;border-left:1pt solid #c1c1c1;border-bottom:1pt solid #c1c1c1;width:170px;height:19px;">
                    <input type="text" name="f" id="f" value="可在下拉框选择也可直接输入" style="width:170px;height:15px;border:0pt;">
                </span>
            </td>
        </tr>
    </table>
</span></div><br><br><br>

<div>详细默认收货地址：<input type="text" name="ad" id="ad" maxlength="100" onblur="checkAd()"/> （*必填，0~100位，只得包含汉字、数字、英文大小写字母的一种或多种）
<a href="#" id="adclass" class=""> </a></div><br>
<div class="clear"></div> 
<span style="font-size:13px" id="adspan"></span>  

<div>短信验证码：<input type="text" id="dy" maxlength="6" onblur="checkDy()"/> <input type="button" value="获取验证码" />（*必填，且必须与手机号收到的验证码一致）
<a href="#" id="dyclass" class=""> </a></div><br>
<div class="clear"></div>  
<span style="font-size:13px" id="dyspan"></span>  

<div><input type="submit" value="确认注册"/> <input type="reset" value="重置" /></div>
<div class="clear"></div>
</ul>
</form>
</body>
</html>